<!-- 逻辑 -->
  <script setup lang="ts">
  // reactive 只可以配合引用数据类型使用
  //1.导入reactive函数
  import { reactive } from "vue"
  //2. 通过reactive 将对象转换为响应式(状态变量)
  const dog=reactive({
    name:'旺财',
    color:'黄色',
    food:['鸡腿']
  })
  const addFood=()=>{
    dog.food.push('大骨头')
  }

</script>
<!-- 结构 -->
<template>

  <h1 @click="dog.name+='1'">{{ dog.name  }}</h1>
  
  <h1 >{{ dog.color }}</h1>
  
  <h1 @click="addFood">{{ dog.food  }}</h1>
</template>
<!-- 样式 -->
<style>

</style>
